<template>
  <div class="config-panel">
    <template v-if="editorJson">
      <!-- module层：每一个模块，根据模块的渲染规则来 -->
      <p class="config-panel-title">{{ currentPickType }}</p>
      <ConfigModule
        v-for="(moduleJson, name, id) in editorJson"
        ref="module"
        :key="name"
        :moduleJson="moduleJson"
        :value="currentValue"
        :currentPickId="currentPickId"
        @changeValue="changeValue"
        :jsonValue="jsonValue"
      ></ConfigModule>
    </template>
  </div>
</template>

<!-- 
configPanel:负责壳和数据
configModule:负责内核渲染

1.根据选中的类型，筛选出json 达到选中与json联动起来 
2.渲染出cofig-module 层 微内核模块
 -->

<script setup>
import { defineProps, ref, watch } from "vue";
import ConfigModule from "./configModule.vue";
import { useJsonStore } from "@/store/json";

// 配置文件
import json from "@/config/json/index.js"; // 单种类型配置的对象
import { onBeforeMount } from "vue";

const props = defineProps({
  currentPickType: String,
  value: Object,
  currentPickId: String,
});
const _json = ref();
const defaultValue = ref({});

const editorJson = ref({}); // 实时组装json
const jsonValue = ref("");
const currentValue = ref(props.value); // 选中类型
const store = ref({});
const JsonStore = useJsonStore();

onBeforeMount(() => {
  init();
});

watch(
  () => props.currentPickId,
  () => {
    editorJson.value = getJson(props.currentPickType);
    console.log(59, editorJson.value);
    jsonValue.value =
      getValue(JsonStore.json.page.children, props.currentPickId) || {};
  }
);

function init() {
  const jsonData = getJson(props.currentPickType);

  _json.value = jsonData;
  defaultValue.value = jsonData.default;
  editorJson.value = jsonData;
  jsonValue.value =
    getValue(JsonStore.json.page.children, props.currentPickId) || {};

  if (!currentValue || Object.keys(currentValue).length == 0) {
    currentValue.value = jsonData.default;
  }
}

// 根据类型获取json
function getJson(type) {
  let _components = json.configs[type] || {};

  let panelConfig = _components.panelCore || {};
  let _json = panelConfig.model || [];
  return _json;
}

// 递归查询json
function getValue(arr, id) {
  for (const node of arr) {
    if (node.id === id) {
      return node; // 找到节点，返回它
    } else if (node.children && node.children.length > 0) {
      // 如果节点有子节点，递归搜索子节点
      const found = getValue(node.children, id);
      if (found) return found; // 如果在子节点中找到，返回它
    }
  }
  return null; // 如果找不到，返回null或抛出错误等，根据你的需求处理。
}

// 配置改变json
function changeValue(name, val, currentPickId) {
  const data = JsonStore.json.page.children;

  const newchildrenJson = updateData(data, val, name, currentPickId);
  const _newJson = { ...JsonStore.json.page, children: newchildrenJson };

  console.log(88, _newJson);
  JsonStore.changeJsonPage(_newJson);
}

// 递归修改树形json
function updateData(arr, val, name, id) {
  arr.forEach((item) => {
    if (item.id === id) {
      item[name] = val;
    } else {
      if (item.children) {
        updateData(item.children || [], val, name, id);
      }
    }
  });

  return arr;
}
</script>

<style>
.config-panel-title {
  margin-bottom: 10px;
}
</style>
